<%@ include file="/common/common.jsp"%>
<%@ page language="java" pageEncoding="UTF-8"%>

<head>
     <title>比特达智能交通运营平台（主动安全版）</title>
<style>

html body{
    height:100%;
}

/*最外层样式*/
.login_parDiv_css{
    width: 100%;
    height:100%;
    min-height: 600px;
    background-color: #2d384c;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
}
/*顶部外层样式*/
.login_topDiv_css{
    width:100%;
    height:13%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: aquamarine; */
}

 /*头部logo样式*/
 .logn_logoDiv_css{
    width:38%;
    height:100%;
    margin-left: 20px;
    display: flex;
    align-items: center;
    /* background-color: cadetblue; */
 }
 .logn_logoDiv_css img{
     max-height: 80px;
     width:100%;
 }

  /*头部phone样式*/
.login_phoneDiv_css{
    height:100%;
    width:21%;
    margin-right:11%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    /* background-color: cadetblue; */
 }
 .login_phoneDiv_css div{
     width:100%;
     margin-bottom: 20px;
 }
 .login_phoneDiv_css img{
     width:100%;   
 }

/*中间登录区背景块*/
.login_bakLoginDiv_css{
    width:100%;
    height:64%;
    max-height: 637px;
    min-width: 400px;
    background: url("<%=ApplicationPath%>/image2/btd-bk.jpg") no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/*登录块外框样式*/
.login_loginDiv_css{
    width:450px;
    height:365px;
    margin-right: 12%;
    /* margin-top: 70px; */
    background: url("<%=ApplicationPath%>/image2/btd-login.png") no-repeat;
    background-size: 100% 100%;
    /* border: 1px solid red; */
}

.login_form_css{
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    /* border:1px solid slateblue; */
}

/*用户名样式*/
.login_nameInput_div_css{
    height:32px;
    width:300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    /* border: 1px solid salmon; */
}

/*密码样式*/
.login_passInput_div_css{
    height:32px;
    width:300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    /* border: 1px solid salmon; */
}
/*登录按钮块样式*/
.login_submitBtn_div_css{
    margin-bottom: 20px;
}

/*记住密码块样式*/
.login_checkDiv_css{
    height:27px;
    width:300px;
    display: flex;
    justify-content: flex-start;
}

/*提示信息块样式*/
.login_msgDiv_css{
    height:30px;
    width:260px;
    color: red;
    font-size: 14px;
    margin-bottom: 25px;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid blue; */
}


.login_bottomDiv_css{
    width:100%;
    height:12%;
    color: white;
    font-size: 20px;
    display: flex;
    margin-top: 15px;
    justify-content: center;
    align-items: center;
}

</style>

<script>
function doValidate() {
    var userstr = document.getElementById("username").value;
    var psd = document.getElementById("password").value;
    var rd = document.getElementById("randomCode").value;
    var message = document.getElementById("message");
    var trmessage = document.getElementById("trmessage");
    if (!userstr.match(/^\S{2,20}$/)) {
        trmessage.style.display = "";
        message.innerHTML = "请输入正确的用户名";
        return false;
    }
    if (psd.length <= 0) {
        trmessage.style.display = "";
        message.innerHTML = "密码不能为空";
        return false;
    }
    trmessage.style.display = "none";
    return true;

}

function load(){
    var infoTip = '<%=request.getAttribute("message")%>';
    if (infoTip.length > 0 && infoTip != 'null') {
        var message = document.getElementById("message");
        var trmessage = document.getElementById("trmessage");
        trmessage.style.display = "";
        message.innerHTML = infoTip;
    }
    //window.setTimeout("changeValidateCode(document.getElementById('pic_random_code'));",100);

    //改变输入框背景
    // $("#nameInput").css("background-color","gray");
}
</script>


</head>


<body onload="load()">
    <div class="login_parDiv_css">
        <div class="login_topDiv_css">
            <div class="logn_logoDiv_css"><img  src="<%=ApplicationPath%>/image2/btd-logo.png" /></div>
            <div class="login_phoneDiv_css"><div><img  src="<%=ApplicationPath%>/image2/btd-phone.png" /></div></div>
        </div>
        <div class="login_bakLoginDiv_css">
            <!--中间登录块-->
            <div class="login_loginDiv_css">
                <form class="login_form_css" method="post" id="loginForm" name="loginForm" autocomplete="off" action="<%=ApplicationPath%>/login.action"
                    onSubmit="return doValidate();">
                    <div class="login_nameInput_div_css">
                        <span>用户名：</span>
                        <input type="text" name="username" id="username" tabindex="1" style="width: 216px;height:28px;" />
                    </div>
                    <div class="login_passInput_div_css">
                        <span>密&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
                        <input type="password" name="password" id="password" tabindex="2" style="width: 216px;height:28px;" />
                    </div>
                    <div class="login_submitBtn_div_css">
                        <input type="image" src="<%=ApplicationPath%>/image2/btd-btn.png" onClick="" style="cursor:hand;" />
                    </div>
                    <div class="login_checkDiv_css">
                        <input name="Fruit" type="checkbox" value="" style="width:17px;height:17px;" />
                        <div class="saveCheckbox-text">记住密码</div>
                    </div>
                      
                    <div class="login_msgDiv_css"  id="trmessage"> <a id="message"></a></div>
                </form>
            </div>
        </div>
        <div class="login_bottomDiv_css">
            <div>江苏比特达信息技术有限公司&nbsp;&nbsp;&nbsp;&nbsp;苏ICP备09024035号-4</div>
        </div>
    </div>
</body>